<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>轮播图</title>
	<script src="js/jquery-3.3.1.min.js"></script>
<style>
	*{
		margin: 0;
		padding: 0;
	}
	.container{
		width: 600px;
		height: 400px;
		position: relative;
		margin: 0 auto;
		/*溢出隐藏*/
		overflow: hidden;
	}
	.container:hover .arrow{
		display: block;
	}
	.list{
		/*这里的绝对定位相对于父标签的相对定位*/
		position: absolute;
		width: 3000px;
		height: 400px;
	}
	.list img{
		width: 600px;
		height: 400px;
		float: left;
	}
	.pointer{
		position: absolute;
		width: 100px;
		height: 20px;
		left:250px;
		bottom: 20px;
	}
	.pointer span{
		/*行内标签对高和宽不生效*/
		width: 10px;
		height: 10px;
		border: 1px solid black;
		border-radius: 50%;
		background-color: antiquewhite;
		/*inline-block显示在一行的块状标签*/
		display: inline-block;
	}
	
	.left{
		left: 0;
	}
	.right{
		right: 0;
	}
	.arrow{
		position: absolute;
		width: 40px;
		height: 40px;
		background-color: #23ADDF;
		top:180px;
		text-align: center;
		/*line-height设置为标签的高度即可居中*/
		line-height: 40px;
		font-weight: bold;
		display: none;
	}
	.arrow:hover{
		background-color: #0486E4;
	}
	.pointer .on{
		background-color: aquamarine;
	}
</style>
</head>


<body>
	<div class="container">
		
		<div class="list">
			<img src="image/1.jpeg" alt="" title="1">
			<img src="image/2.jpeg" alt="" title="2">
			<img src="image/3.jpeg" alt="" title="3">
			<img src="image/4.jpeg" alt="" title="4">
			<img src="image/5.jpeg" alt="" title="5">
		</div>
		<!--圆点-->
		<div class="pointer">
			<!--index为索引-->
			<span index="1" class="on"></span>
			<span index="2"></span>
			<span index="3"></span>
			<span index="4"></span>
			<span index="5"></span>
		</div>
		<!--左右图片的切换-->
		<div class="arrow left">&lt;</div>
		<div class="arrow right">&gt;</div>
	</div>
	<script>
		var index=1;/*索引变量*/
		var imageCount=5;/*图片数量*/
		var targeLeft=0;/*标签要的距离*/
		var buttonSpan=$(".pointer")[0].children;/*获取所有span标签*/
		
		
		
		/*切换页面*/
		$(".left").click(function(){
			nextPage(false);
		});
		$(".right").click(function(){
			nextPage(true);
		});
		function nextPage(next){/*图片的切换，当next-true为true时为下一张，nextPage为false为上一张*/
			if(next){
				if(index==5){
					index=1;
					targeLeft=0;
				}else{
					index++;
					targeLeft=-600*(index-1);
				}
			}else{
				if(index==1){
					index=5;
					targeLeft=-600*(imageCount-1);
				}else{
					index--;
					targeLeft=-600*(index-1);
				}
			}
			/*移动的过程*/
			$(".list").animate({left:targeLeft+"px"},1000);
			$(buttonSpan[$(this).attr("index")-1]).addClass("on");
			$(buttonSpan[$(this).attr("index")-1]).siblings().removeClass("on");
		}
		
		/*自动轮播*/
		setInterval(autoPage,3000);
		function autoPage(){
			nextPage(true);
		}
		
		/*点的切换*/
		function nextPoint(index){
			
		}
		
		/*不太熟悉*/
		/*点击圆点标签切换图片*/
		clickButton();/*调用方法*/
		function clickButton(){
			for(var i=0;i<buttonSpan.length;i++){
				buttonSpan[i].onclick=function(){
					targeLeft=-600*($(this).attr("index")-1);/*buttonSpan[i].index*/
					$(".list").animate({left:targeLeft+"px"},1000);
					$(buttonSpan[$(this).attr("index")-1]).addClass("on");
					$(buttonSpan[$(this).attr("index")-1]).siblings().removeClass("on");
				}
			}
		}
	
	</script>
</body>
</html>
